<template>
    <!-- 底部操作栏 -->
    <div class="bottom-actions">
      <el-button type="primary" @click="goHome">
        <el-icon><ArrowLeft /></el-icon>
        返回首页
      </el-button>
      <el-button @click="showHelp">
        <el-icon><QuestionFilled /></el-icon>
        使用帮助
      </el-button>
      <el-button @click="switchLanguage">
        <el-icon><SwitchButton /></el-icon>
        切换语言
      </el-button>
    </div>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { useRouter } from "vue-router";

const router = useRouter();

// 底部操作按钮功能
const goBack = () => {
  ElMessage.info('返回上级页面')
  router.back()
}

const goHome = () => {
  ElMessage.info('返回首页')
  //情况防止上一个用户的信息被使用
  localStorage.clear();
  router.push('/self-service')
} 

const showHelp = () => {
  ElMessage.info('显示使用帮助')
}

const switchLanguage = () => {
  ElMessage.info('切换系统语言')
}
</script>
<style lang="scss" scoped>
// 底部操作栏
.bottom-actions {
  background: white;
  padding: 15px 24px;
  display: flex;
  justify-content: center;
  gap: 15px;
  border-top: 1px solid #ebeef5;
}
</style>